<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../css/detail.css" />
	</head>

	<body>
		<!--变价通知-->
		<div class="d-mask" onclick="closeNotice()"></div>
		<form class="noticebox column">
			<h2></h2>
			<span></span>
			<div class="row">
				<label>手机号</label>
				<input type="tel" maxlength="11" placeholder="请输入手机号" />
			</div>
			<div class="row">
				<label>验证码</label>
				<input type="text" />
				<button type="button" id="code" disabled="disabled">获取验证码</button>
			</div>
			<div class="read row">
				<em></em>
				<p>我已阅读同意<a href="#">《隐私权政策》</a><a href="#">《我房网服务协议》</a></p>
			</div>
			<div class="row notice-btn">
				<button type="button" class="cancel" onclick="closeNotice()">取消</button>
				<button type="button" class="sure">确定</button>
			</div>
		</form>
		<div class="upper">
			<div class="upper-header row">
				<a href="javascript:history.go(-1);" class="back"><img src="../images/b-back.png" /></a>
				<h2>四季华庭贝多芬</h2>
				<div class="icon row">
					<a href="#" class="collect"><img src="../images/b-collect.png" /></a>
					<a href="#" class="share"><img src="../images/b-share.png" /></a>
				</div>
			</div>
			<div class="upper-nav row">
				<a id="a11" href="#a1">详情</a>
				<a id="a22" href="#a2">户型</a>
				<a id="a33" href="#a3">动态</a>
				<a id="a44" href="#a4">地图</a>
				<a id="a55" href="#a5">问答</a>
			</div>
		</div>
		<div class="detailbox">
			<div class="banner">
				<a href="javascript:history.go(-1);" class="back"><img src="../images/left.png" /></a>
				<div class="icon row">
					<a href="#" class="collect"><img src="../images/collect.png" /></a>
					<a href="#" class="share"><img src="../images/share.png" /></a>
				</div>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
						<a href="buildingPic.html" class="swiper-slide"><img src="../images/banner.jpg" /></a>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div id="a1">
				<div class="introduce">
					<a href="#" class="cal row">房贷计算器</a>
					<h1>四季华庭贝多芬</h1>
					<div class="tabbox row">
						<a href="javascript:;" class="row">满两年</a>
						<a href="javascript:;" class="row">满五年</a>
						<a href="javascript:;" class="row">随时可看</a>
					</div>
					<ul>
						<li class="row">
							<label>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</label>
							<span>17000元/㎡</span>
							<em>参考价格</em>
						</li>
						<li class="row">
							<label>开盘时间</label>
							<p>2018.02.30</p>
						</li>
						<li class="row">
							<label>楼盘地址</label>
							<p>海口市龙华区沿江五西路31号</p>
						</li>
					</ul>
					<a href="#" class="moreMsg row">更多楼盘信息</a>
					<div class="row remind">
						<a href="javascript:;" class="row price" onclick="openNotice(this)">
							<img src="../images/price.png" />
							<span>变价提醒我</span>
						</a>
						<a href="javascript:;" class="row open" onclick="openNotice(this)">
							<img src="../images/open.png" />
							<span>开盘提醒我</span>
						</a>
					</div>
				</div>
			</div>
			<div id="a2">
				<div class="part">
					<div class="row title">
						<div class="row">
							<h4>户型图</h4>
							<span>9</span>
						</div>
						<a href="javascript:;"><img src="../images/right.png" /></a>
					</div>
					<ul class="house-img row">
						<li>
							<a href="#" class="column">
								<img src="../images/pic01.png" />
								<p>1房2厅2卫</p>
								<span>80.23㎡</span>
							</a>
						</li>
						<li>
							<a href="#" class="column">
								<img src="../images/pic01.png" />
								<p>1房2厅2卫</p>
								<span>80.23㎡</span>
							</a>
						</li>
						<li>
							<a href="#" class="column">
								<img src="../images/pic01.png" />
								<p>1房2厅2卫</p>
								<span>80.23㎡</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="a3">
				<div class="part">
					<div class="row title">
						<div class="row">
							<h4>楼盘动态</h4>
							<span>8</span>
						</div>
						<a href="station.html"><img src="../images/right.png" /></a>
					</div>
					<ul class="trend">
						<li>
							<a href="javascript:;" class="column">
								<em>2018.11.23</em>
								<h3>标题南海嘉园建材 均价</h3>
								<p>盛达景都由海南盛达房地产，有限公司倾力打造，恰处国兴大道和美苑路交汇处，法规回复通公里GF内汇法规回复通公里GF内汇</p>
							</a>
						</li>
						<li>
							<a href="javascript:;" class="column">
								<em>2018.11.23</em>
								<h3>标题南海嘉园建材 均价</h3>
								<p>盛达景都由海南盛达房地产，有限公司倾力打造，恰处国兴大道和美苑路交汇处，法规回复通公里GF内汇法规回复通公里GF内汇</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="a4">
				<div class="part">
					<div class="row title">
						<h4>位置及周边</h4>
						<a href="javascript:;"><img src="../images/right.png" /></a>
					</div>
					<div id="allmap"></div>
				</div>
			</div>
			<div id="a5">
				<div class="part">
					<div class="row title">
						<h4>在线问答</h4>
						<a href="javascript:;"><img src="../images/right.png" /></a>
					</div>
					<div class="online">
						<a href="javascript:;" class="column">
							<div class="row ask">
								<img src="../images/question.png" />
								<h3>求购定安45平方房子多少钱？</h3>
							</div>
							<div class="row ask">
								<img src="../images/answer.png" />
								<p>更好定安回韩国发货规范，化对方过后房子多少钱兔兔有划就，开发了手机发来的发的，记得看过多少百慕大三角了。雕刻时客规来看就，平立刻返是子多个历的平立刻返是子多个历的...</p>
							</div>
							<span>查看1个回答</span>
						</a>
					</div>
					<a href="#" class="moreMsg row">我要提问</a>
				</div>
			</div>
			<div class="part">
				<div class="row title">
					<h4>同区域楼盘</h4>
				</div>
				<div class="re-conbox">
					<div class="conbox">
						<a href="tel:13508980898" class="tel"><img src="../images/phone.png" /></a>
						<a href="#" class="content row">
							<img src="../images/pic..jpg" class="house-pic">
							<div class="column">
								<h1>南海嘉园南海嘉园房</h1>
								<span>海口-琼山区</span>
								<div class="row">
									<img src="../images/location.png" class="locate">
									<p>海口市美兰区龙昆南二路</p>
								</div>
								<ul class="row">
									<li>低密度</li>
									<li>满五年</li>
									<li>养老居所</li>
								</ul>
							</div>
							<em>19300元/㎡</em>
						</a>
					</div>
					<div class="conbox">
						<a href="tel:13508980898" class="tel"><img src="../images/phone.png" /></a>
						<a href="#" class="content row">
							<img src="../images/pic..jpg" class="house-pic">
							<div class="column">
								<h1>南海嘉园南海嘉园房</h1>
								<span>海口-琼山区</span>
								<div class="row">
									<img src="../images/location.png" class="locate">
									<p>海口市美兰区龙昆南二路</p>
								</div>
								<ul class="row">
									<li>低密度</li>
									<li>满五年</li>
									<li>养老居所</li>
								</ul>
							</div>
							<em>19300元/㎡</em>
						</a>
					</div>
				</div>
			</div>
		</div>
		<footer class="row detail-footer">
			<a href="javascript:;" class="row">
				<img src="../images/seek.png" class="b-img" />
				<img src="../images/w-seek.png" class="w-img" />
				<span>在线咨询</span>
			</a>
			<a href="javascript:;" class="row">
				<img src="../images/tel.png" class="b-img" />
				<img src="../images/w-tel.png" class="w-img" />
				<span>电话咨询</span>
			</a>
			<a href="javascript:;" class="row">
				<img src="../images/order.png" class="b-img" />
				<img src="../images/w-order.png" class="w-img" />
				<span>预约看房</span>
			</a>
		</footer>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/wap.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script>
			var swiper = new Swiper('.swiper-container', {
				pagination: {
					el: '.swiper-pagination',
					type: 'fraction',
				},
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false,
				},
				loop: true,
			});
		</script>
		<!--地图-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9Gg5RxTuLKmem9LNpyvgMb1opNUmV2hY"></script>
		<script type="text/javascript">
			var map = new BMap.Map("allmap"); // 创建Map实例
			map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
			map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
			map.enableScrollWheelZoom(true);
		</script>
		<!--点击锚点-->
		<script type="text/javascript">
			//顶部出现
			function scrollE() {
				var wst = $(window).scrollTop() //滚动条距离顶端值
				for (i = 1; i < 6; i++) { //加循环
					if ($("#a" + i).offset().top - 120 <= wst) { //判断滚动条位置
						$('.upper .upper-nav a').removeClass("on"); //清除c类
						$("#a" + i + i).addClass("on"); //给当前导航加c类
					}
				}
				if ($(document).scrollTop() != 0) {
					$('.upper').addClass('tp4');
				} else {
					$('.upper').removeClass('tp4');
				}
			}
			$(document).ready(function() {
				$(window).on('scroll', scrollE);
			});
			//点击底部加类
			$('.detail-footer .row').on("click", function() {
				$('.detail-footer .row').removeClass('on');
				$(this).addClass("on");
			})
			//点击出现弹出框
			function openNotice(e){
				$('body').css({'position': 'fixed', 'width': '100%'});
				var txt = $(e).find('span').html();
				if(txt == '变价提醒我'){
					$('form.noticebox').find('h2').html('变价通知我');
					$('form.noticebox').find('span').html('房价变动会通过手机推送消息通知您');
				} else if(txt == '开盘提醒我'){
					$('form.noticebox').find('h2').html('开盘通知我');
					$('form.noticebox').find('span').html('开盘消息会通过手机推送消息通知您');
				}
				$('.d-mask').fadeIn();
				$('form.noticebox').css('display','flex');
				$('body').css('overflow','hidden');
			}
			//关闭弹出框
			function closeNotice(){
				 $('body').css({'position': 'relative'});
				$('.d-mask').fadeOut();
				$('form.noticebox').css('display','none');
				$('body').css('overflow','auto');
			}
			//判断是否选择已阅读
			$('form.noticebox .row input[type=tel]').on('input',function(){
				var val = $('form.noticebox .row input').val();
				if(val != ''){
					$('form.noticebox .row button#code').removeAttr('disabled');
				} else {
					$('form.noticebox .row button#code').attr('disabled', 'disabled');
				}
			});
			$('form.noticebox .row.read').click(function() {
				if ($(this).children('em').hasClass('on')) {
					$(this).children('em').removeClass('on');
//					$('form.noticebox .row input,form.noticebox .row button#code').attr('disabled', 'disabled');
				} else {
					$(this).children('em').addClass('on');
//					$('form.noticebox .row input,form.noticebox .row button#code').removeAttr('disabled');
				}
			});
			//计时器
			var wait = 60;

			function time(o) {
				if (wait == 0) {
					o.innerHTML = "获取验证码";
					o.setAttribute("enabled");
					wait = 120;
				} else {
					o.innerHTML = "已发送" + wait + "S";
					o.setAttribute("disabled", true);
					wait--;
					setTimeout(function() {
							time(o)
						},
						1000)
				}
			}
			document.getElementById("code").onclick = function() {
				time(this);
			}
		</script>
	</body>

</html>